<template>

<div>
  <h1>Elementplus</h1>
  <div>
    <el-card style="max-width: 900px">
     <template #header >
       <div class="card-header">
        <div> <span>会员管理</span><br>
         <el-button type="success" @click="add">添加会员</el-button>
         <el-button type="primary">导出Excel</el-button>
         <el-button type="danger">批量删除</el-button>
        </div>
       </div>
     </template>
    
     <template #footer>
        <!-- 分页 -->
         <el-pagination @current-change="docurrentchange"  background layout="prev, pager, next" :total="50" />
     </template>
    </el-card>


    <div>九九乘法表</div>
    <div>
      <div v-for="i in 9" :key="i" :class="{ a1:i%2=== 1, a2:i%2===0 }"><br>
        <span v-for="j in i" :key="j" >
          {{j}}x{{i}}={{j*i}} &nbsp;
        </span>
      </div>

    </div>
    <hr>
    

  </div>
</div>


</template>




<script setup>
import { onMounted, ref } from "vue";
const tableData=ref([
  {id:1,name:"自传书",price:"59",count:10,author:"飒",imge: "https://img0.baidu.com/it/u=940497447,514656619&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083"},
  {id:2,name:"活着",price:"80",count:100,author:"余华",imge: "https://img2.baidu.com/it/u=1281341495,1108050852&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1443"},
  {id:3,name:"自传书",price:"59",count:10,author:"小枣",imge: "https://img0.baidu.com/it/u=3622372000,1336578847&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"},
   {id:4,name:"自传书",price:"59",count:10,author:"飒",imge: "https://img0.baidu.com/it/u=940497447,514656619&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1083"},
  {id:5,name:"活着",price:"80",count:100,author:"余华",imge: "https://img2.baidu.com/it/u=1281341495,1108050852&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1443"},
])

const value = ref()
const q = ref()
//分页数据，改变触发
import { ElMessage } from 'element-plus'
const docurrentchange=(number)=>{
  //消息提示框
  ElMessage.success("当前页:"+number)
  
   
  //分页显示
  return tableData.value.filter((_,index)=>index<6)
}

</script>

<style scoped>
.a1{
  color: #1fd3a6;
}
.a2{
  color: blue;
}
</style>





